CSS μ λλ©μ΄μ λ²μ, νΉν μ€ν¬λ‘€ κΈ°λ° μ λλ©μ΄μ μ μ΄μ λν μ’ ν© κ°μ΄λμ λλ€. μ΅μ CSS κΈ°μ μ μ¬μ©νμ¬ λ§€λ ₯μ μ΄κ³ μΈν°λν°λΈν μΉ κ²½νμ λ§λλ λ°©λ²μ λ°°μ°μΈμ.
CSS μ λλ©μ΄μ λ²μ λ§μ€ν°νκΈ°: μ€ν¬λ‘€ κΈ°λ° μ λλ©μ΄μ μ μ΄
μ€λλ μ μλμ μΈ μΉ νκ²½μμ μ¬μ©μ μ°Έμ¬λ 무μλ³΄λ€ μ€μν©λλ€. μ μ μΈ μΉ νμ΄μ§λ κ³Όκ±°μ μ λ¬Όμ λλ€. νλμ μΈ μΉμ¬μ΄νΈλ μΈν°λν°λΈνκ³ μκ°μ μΌλ‘ λ§€λ ₯μ μ΄λ©°, κ°μ₯ μ€μνκ²λ μνν μ¬μ©μ κ²½νμ μ 곡ν΄μΌ ν©λλ€. μ΄λ₯Ό λ¬μ±νκΈ° μν κ°λ ₯ν λꡬ μ€ νλκ° λ°λ‘ CSS μ λλ©μ΄μ λ²μλ₯Ό μ¬μ©ν μ€ν¬λ‘€ κΈ°λ° μ λλ©μ΄μ μ λλ€.
μ΄ κ°μ΄λλ CSS μ λλ©μ΄μ λ²μμ μΈκ³λ₯Ό νꡬνλ©°, μ€ν¬λ‘€ μμΉλ₯Ό νμ©νμ¬ μ λλ©μ΄μ μ¬μμ μ μ΄νκ³ μ¬μ©μμ μνΈμμ©μ μ§μ λ°μνλ λ§€νΉμ μΈ ν¨κ³Όλ₯Ό λ§λλ λ°©λ²μ μ΄ν΄λ΄ λλ€. μ€ν¬λ‘€ κΈ°λ° μ λλ©μ΄μ μ λ§μ€ν°νκ³ μΉ λμμΈ κΈ°μ μ ν λ¨κ³ λμ΄μ¬λ¦¬λ λ° λμμ΄ λ κΈ°λ³Έ κ°λ , μ€μ μμ , κ·Έλ¦¬κ³ κ³ κΈ κΈ°μ μ λ€λ£° κ²μ λλ€.
μ€ν¬λ‘€ κΈ°λ° μ λλ©μ΄μ μ΄λ 무μμΈκ°?
μ€ν¬λ‘€ κΈ°λ° μ λλ©μ΄μ μ ν΅μ¬μ CSS μ λλ©μ΄μ μ μ§νλ₯ μ μ¬μ©μμ μ€ν¬λ‘€ μμΉμ μ°κ²°νλ κΈ°μ μ λλ€. μ λλ©μ΄μ μ΄ μλμΌλ‘ μ¬μλκ±°λ νΈλ² λλ ν΄λ¦κ³Ό κ°μ μ΄λ²€νΈμ μν΄ νΈλ¦¬κ±°λλ λμ , μ¬μ©μκ° νμ΄μ§λ₯Ό μλ(λλ μ)λ‘ μ€ν¬λ‘€νλ κ²μ μ§μ λ°μν©λλ€. μ΄λ μ§μ μ μΈ μ‘°μκ°μ λ§λ€μ΄λ΄κ³ μΉμ¬μ΄νΈμ μΈμ§λ μνΈμμ©μ±μ ν₯μμν΅λλ€.
ν λμμ μμ¬λ₯Ό 보μ¬μ£Όλ μΉμ¬μ΄νΈλ₯Ό μμν΄ λ³΄μΈμ. μ¬μ©μκ° μλλ‘ μ€ν¬λ‘€νλ©΄ κ±΄λ¬Όμ΄ λ μμ μμμ€λ₯΄κ³ , μμ¬μ μΈλ¬Όμ΄ λνλλ©°, μ§λκ° νΌμ³μ§λ λͺ¨λ κ²μ΄ μ€ν¬λ‘€κ³Ό λκΈ°νλ©λλ€. μ΄λ¬ν λͺ°μ κ° μλ κ²½νμ μ€ν¬λ‘€ κΈ°λ° μ λλ©μ΄μ μ ν΅ν΄ κ°λ₯ν΄μ§λλ€.
μ€ν¬λ‘€ κΈ°λ° μ λλ©μ΄μ μ μ¬μ©νλ μ΄μ
- ν₯μλ μ¬μ©μ μ°Έμ¬: μ€ν¬λ‘€ κΈ°λ° μ λλ©μ΄μ μ μΉμ¬μ΄νΈλ₯Ό λμ± μΈν°λν°λΈνκ³ λ§€λ ₯μ μΌλ‘ λ§λ€μ΄ μ¬μ©μμ μ£Όμλ₯Ό λκ³ λ νμνλλ‘ μ λν©λλ€.
- ν₯μλ μ€ν 리ν λ§: μ€ν¬λ‘€ μμΉλ‘ μ λλ©μ΄μ μ¬μμ μ μ΄ν¨μΌλ‘μ¨, μ€λλ ₯ μλ μμ¬λ₯Ό λ§λ€κ³ μκ°μ μΌλ‘ μκ·Ήμ μΈ λ°©μμΌλ‘ μ½ν μΈ λ₯Ό ν΅ν΄ μ¬μ©μλ₯Ό μλ΄ν μ μμ΅λλ€. μ¬μ©μκ° μ€ν¬λ‘€ν¨μ λ°λΌ μ λ³΄κ° λλ¬λλ μΈν°λν°λΈ νμλΌμΈμ΄λ μ ν μΌμΌμ΄μ€λ₯Ό μκ°ν΄ 보μΈμ.
- λ λ°μ΄λ μ μ΄μ μ λ°μ±: μ΄λ²€νΈμ μν΄ νΈλ¦¬κ±°λλ κΈ°μ‘΄ μ λλ©μ΄μ κ³Ό λ¬λ¦¬, μ€ν¬λ‘€ κΈ°λ° μ λλ©μ΄μ μ μ λλ©μ΄μ νμ΄λ°κ³Ό λκΈ°νμ λν΄ λ μΈλ°ν μ μ΄λ₯Ό μ 곡ν©λλ€. μ λλ©μ΄μ μ§νλ₯ μ νΉμ μ€ν¬λ‘€ μμΉμ μ ννκ² λ§€νν μ μμ΅λλ€.
- μ±λ₯ κ³ λ €μ¬ν: νλμ¨μ΄ κ°μ λ° ν¨μ¨μ μΈ μ½λ© κ΄νμ μ¬μ©νμ¬ μ¬λ°λ₯΄κ² ꡬννλ©΄, μ€ν¬λ‘€ κΈ°λ° μ λλ©μ΄μ μ μ±λ₯μ΄ μ°μνκ³ λΆλλ¬μ΄ μ¬μ©μ κ²½νμ μ 곡ν μ μμ΅λλ€.
CSS μ λλ©μ΄μ λ²μμ κΈ°λ³Έ
CSS μ체μλ λ€μ΄ν°λΈ "μ€ν¬λ‘€ κΈ°λ° μ λλ©μ΄μ
" μμ±μ΄ μμ§λ§, CSS μ λλ©μ΄μ
, μλ°μ€ν¬λ¦½νΈ(λλ λΌμ΄λΈλ¬λ¦¬), κ·Έλ¦¬κ³ scroll μ΄λ²€νΈλ₯Ό μ‘°ν©νμ¬ μ΄ ν¨κ³Όλ₯Ό μ»μ μ μμ΅λλ€.
μ£Όμ κ΅¬μ± μμ:
- CSS μ λλ©μ΄μ : ν€νλ μμ μ¬μ©νμ¬ μ λλ©μ΄μ μ체λ₯Ό μ μν©λλ€. μ΄λ μκ° κ²½κ³Όμ λ°λΌ μμμ μμ±μ΄ μ΄λ»κ² λ³νλμ§ μ§μ ν©λλ€.
- μλ°μ€ν¬λ¦½νΈ (λλ λΌμ΄λΈλ¬λ¦¬):
scrollμ΄λ²€νΈλ₯Ό μμ νκ³ μ€ν¬λ‘€ μ§νλ₯ (νμ΄μ§κ° μ€ν¬λ‘€λ λΉμ¨)μ κ³μ°ν©λλ€. - μ λλ©μ΄μ μ§νλ₯ λ§€ν: μ€ν¬λ‘€ μ§νλ₯ μ μ λλ©μ΄μ μ νμλΌμΈμ λ§€νν©λλ€. μ¦, μ€ν¬λ‘€ μ§νλ₯ μ΄ 50%μ΄λ©΄ μ λλ©μ΄μ μ΄ 50% ν€νλ μμ μλ κ²κ³Ό κ°μ΅λλ€.
κΈ°λ³Έ μμ : μ€ν¬λ‘€ μ μμ νμ΄λ μΈ
μ¬μ©μκ° μλλ‘ μ€ν¬λ‘€ν λ μμκ° νμ΄λ μΈλλ κ°λ¨ν μμ λΆν° μμνκ² μ΅λλ€.
HTML:
<div class="fade-in-element">
<p>This element will fade in as you scroll.</p>
</div>
CSS:
.fade-in-element {
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.fade-in-element.visible {
opacity: 1;
}
μλ°μ€ν¬λ¦½νΈ:
window.addEventListener('scroll', () => {
const element = document.querySelector('.fade-in-element');
const elementPosition = element.getBoundingClientRect().top;
const screenPosition = window.innerHeight;
if (elementPosition < screenPosition) {
element.classList.add('visible');
} else {
element.classList.remove('visible');
}
});
μ€λͺ :
- HTMLμ
fade-in-elementν΄λμ€λ₯Ό κ°μ§divλ₯Ό μ μν©λλ€. - CSSλ μ΄κΈ°μ μμμ ν¬λͺ
λλ₯Ό 0μΌλ‘ μ€μ νκ³ opacity μμ±μ λν μ ν(transition)μ μ μν©λλ€. λν ν¬λͺ
λλ₯Ό 1λ‘ μ€μ νλ
.visibleν΄λμ€λ₯Ό μ μν©λλ€. - μλ°μ€ν¬λ¦½νΈλ
scrollμ΄λ²€νΈλ₯Ό μμ ν©λλ€. κ·Έλ° λ€μ λ·°ν¬νΈλ₯Ό κΈ°μ€μΌλ‘ μμμ μμΉλ₯Ό κ³μ°ν©λλ€. μμκ° λ·°ν¬νΈ λ΄μ μμΌλ©΄visibleν΄λμ€κ° μΆκ°λμ΄ μμκ° νμ΄λ μΈλ©λλ€. κ·Έλ μ§ μμΌλ©΄visibleν΄λμ€κ° μ κ±°λμ΄ μμκ° νμ΄λ μμλ©λλ€.
CSS μ λλ©μ΄μ λ²μλ₯Ό μν κ³ κΈ κΈ°μ
μ΄μ μμ λ κΈ°λ³Έμ μΈ μκ°λ₯Ό μ 곡νμ΅λλ€. μ΄μ λ μ κ΅ν μ€ν¬λ‘€ κΈ°λ° μ λλ©μ΄μ μ λ§λ€κΈ° μν κ³ κΈ κΈ°μ μ μ΄ν΄λ³΄κ² μ΅λλ€.
1. μ λ°ν μ λλ©μ΄μ μ μ΄λ₯Ό μν μ€ν¬λ‘€ λΉμ¨ μ¬μ©
λ¨μν ν΄λμ€λ₯Ό μΆκ°νκ±°λ μ κ±°νλ λμ , μ€ν¬λ‘€ λΉμ¨μ μ¬μ©νμ¬ μ λλ©μ΄μ μμ±μ μ§μ μ μ΄ν μ μμ΅λλ€. μ΄λ₯Ό ν΅ν΄ λ μΈλ°νκ³ λΆλλ¬μ΄ μ λλ©μ΄μ μ΄ κ°λ₯ν©λλ€.
μμ : μ€ν¬λ‘€ λΉμ¨μ λ°λΌ μμ μν μ΄λνκΈ°
HTML:
<div class="moving-element">
<p>This element will move horizontally as you scroll.</p>
</div>
CSS:
.moving-element {
position: fixed;
top: 50%;
left: 0;
transform: translateX(0);
transition: transform 0.1s linear;
}
μλ°μ€ν¬λ¦½νΈ:
window.addEventListener('scroll', () => {
const element = document.querySelector('.moving-element');
const scrollHeight = document.documentElement.scrollHeight - window.innerHeight;
const scrollTop = window.scrollY;
const scrollPercentage = scrollTop / scrollHeight;
const maxTranslation = 500; // Maximum horizontal translation in pixels
const translation = scrollPercentage * maxTranslation;
element.style.transform = `translateX(${translation}px)`;
});
μ€λͺ :
- HTMLμ
moving-elementν΄λμ€λ₯Ό κ°μ§divλ₯Ό μ μν©λλ€. - CSSλ μμμ μμΉλ₯Ό κ³ μ (fixed)μΌλ‘ μ€μ νκ³ , μμ§μΌλ‘ μ€μμ λ°°μΉνλ©°, μν μ΄λ(translation)μ 0μΌλ‘ μ΄κΈ°νν©λλ€.
- μλ°μ€ν¬λ¦½νΈλ νμ¬ μ€ν¬λ‘€ μμΉμ μ΄ μ€ν¬λ‘€ κ°λ₯ν λμ΄λ₯Ό κΈ°λ°μΌλ‘ μ€ν¬λ‘€ λΉμ¨μ κ³μ°ν©λλ€. κ·Έλ° λ€μ μ€ν¬λ‘€ λΉμ¨κ³Ό μ΅λ μ΄λ κ°μ κΈ°λ°μΌλ‘ μ΄λ κ°μ κ³μ°ν©λλ€. λ§μ§λ§μΌλ‘ μμμ
transformμμ±μ μ λ°μ΄νΈνμ¬ μνμΌλ‘ μ΄λμν΅λλ€. CSSμtransitionμμ±μ μμ§μμ΄ λΆλλ½λλ‘ λ³΄μ₯ν©λλ€.
2. Intersection Observer API μ¬μ©
Intersection Observer APIλ μμκ° λ·°ν¬νΈμ λ€μ΄μ€κ±°λ λκ° λλ₯Ό κ°μ§νλ λ ν¨μ¨μ μ΄κ³ μ±λ₯μ΄ μ’μ λ°©λ²μ μ 곡ν©λλ€. λͺ¨λ μ€ν¬λ‘€ μ΄λ²€νΈμμ μμ μμΉλ₯Ό κ³μ λ€μ κ³μ°ν νμκ° μμ΅λλ€.
μμ : μμκ° λ·°ν¬νΈμ λ€μ΄μ¬ λ ν¬κΈ° μ‘°μ νκΈ°
HTML:
<div class="scaling-element">
<p>This element will scale up when it enters the viewport.</p>
</div>
CSS:
.scaling-element {
transform: scale(0.5);
transition: transform 0.5s ease-in-out;
}
.scaling-element.in-view {
transform: scale(1);
}
μλ°μ€ν¬λ¦½νΈ:
const scalingElement = document.querySelector('.scaling-element');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
scalingElement.classList.add('in-view');
} else {
scalingElement.classList.remove('in-view');
}
});
});
observer.observe(scalingElement);
μ€λͺ :
- HTMLμ
scaling-elementν΄λμ€λ₯Ό κ°μ§divλ₯Ό μ μν©λλ€. - CSSλ μ΄κΈ°μ μμμ ν¬κΈ°λ₯Ό 50%λ‘ μΆμνκ³
transformμμ±μ λν μ ν(transition)μ μ μν©λλ€..in-viewν΄λμ€λ μμμ ν¬κΈ°λ₯Ό λ€μ 100%λ‘ μ‘°μ ν©λλ€. - μλ°μ€ν¬λ¦½νΈλ Intersection Observer APIλ₯Ό μ¬μ©νμ¬ μμκ° λ·°ν¬νΈμ λ€μ΄μ¬ λλ₯Ό κ°μ§ν©λλ€. μμκ° κ΅μ°¨(λ·° μμ μμ)ν λ
in-viewν΄λμ€κ° μΆκ°λμ΄ ν¬κΈ°κ° 컀μ§λλ€. λ μ΄μ κ΅μ°¨νμ§ μμ λ ν΄λμ€κ° μ κ±°λμ΄ ν¬κΈ°κ° μμμ§λλ€.
3. λμ μ μ΄λ₯Ό μν CSS λ³μ μ¬μ©
CSS λ³μ(μ¬μ©μ μ§μ μμ±)λ μλ°μ€ν¬λ¦½νΈμμ μ§μ μ λλ©μ΄μ μμ±μ λμ μΌλ‘ μ μ΄νλ κ°λ ₯ν λ°©λ²μ μ 곡ν©λλ€. μ΄λ λ κΉλν μ½λμ λ μ μ°ν μ λλ©μ΄μ μ μ΄λ₯Ό κ°λ₯νκ² ν©λλ€.
μμ : μ€ν¬λ‘€ μμΉμ λ°λΌ μμ μμ λ³κ²½νκΈ°
HTML:
<div class="color-changing-element">
<p>This element's color will change as you scroll.</p>
</div>
CSS:
.color-changing-element {
--hue: 0;
background-color: hsl(var(--hue), 100%, 50%);
transition: background-color 0.2s linear;
}
μλ°μ€ν¬λ¦½νΈ:
window.addEventListener('scroll', () => {
const element = document.querySelector('.color-changing-element');
const scrollHeight = document.documentElement.scrollHeight - window.innerHeight;
const scrollTop = window.scrollY;
const scrollPercentage = scrollTop / scrollHeight;
const hue = scrollPercentage * 360; // Hue value for HSL color
element.style.setProperty('--hue', hue);
});
μ€λͺ :
- HTMLμ
color-changing-elementν΄λμ€λ₯Ό κ°μ§divλ₯Ό μ μν©λλ€. - CSSλ
--hueλΌλ CSS λ³μλ₯Ό μ μνκ³ μ΄λ₯Ό μ¬μ©νμ¬ HSL μμ λͺ¨λΈλ‘ μμμ λ°°κ²½μμ μ€μ ν©λλ€. - μλ°μ€ν¬λ¦½νΈλ μ€ν¬λ‘€ λΉμ¨μ κ³μ°νκ³ μ΄λ₯Ό μ¬μ©νμ¬ μμ(hue) κ°μ κ³μ°ν©λλ€. κ·Έλ° λ€μ
element.style.setPropertyλ₯Ό μ¬μ©νμ¬--hueλ³μμ κ°μ μ λ°μ΄νΈνμ¬ μμμ λ°°κ²½μμ λμ μΌλ‘ λ³κ²½ν©λλ€.
μ€ν¬λ‘€ κΈ°λ° μ λλ©μ΄μ μ μν μΈκΈ° λΌμ΄λΈλ¬λ¦¬
λ°λλΌ μλ°μ€ν¬λ¦½νΈλ₯Ό μ¬μ©νμ¬ μ€ν¬λ‘€ κΈ°λ° μ λλ©μ΄μ μ ꡬνν μ μμ§λ§, μ¬λ¬ λΌμ΄λΈλ¬λ¦¬κ° νλ‘μΈμ€λ₯Ό λ¨μννκ³ λ κ³ κΈ κΈ°λ₯μ μ 곡ν μ μμ΅λλ€:
- GSAP (GreenSock Animation Platform): λ°μ΄λ μ±λ₯κ³Ό ν¬λ‘μ€ λΈλΌμ°μ νΈνμ±μ μ 곡νλ κ°λ ₯νκ³ λ€μ¬λ€λ₯ν μ λλ©μ΄μ λΌμ΄λΈλ¬λ¦¬μ λλ€. GSAPμ ScrollTrigger νλ¬κ·ΈμΈμ μ€ν¬λ‘€ κΈ°λ° μ λλ©μ΄μ ꡬνμ ν¨μ¬ μ½κ² λ§λλλ€.
- ScrollMagic: μ€ν¬λ‘€ κΈ°λ° μ λλ©μ΄μ μ μν΄ νΉλ³ν μ€κ³λ μΈκΈ° μλ λΌμ΄λΈλ¬λ¦¬μ λλ€. μ λλ©μ΄μ νΈλ¦¬κ±°λ₯Ό μ½κ² μ μνκ³ μ€ν¬λ‘€ μμΉμ λ°λΌ μ λλ©μ΄μ μ¬μμ μ μ΄ν μ μμ΅λλ€.
- AOS (Animate On Scroll): μμκ° λ·°μ λ€μ΄μ¬ λ 미리 λ§λ€μ΄μ§ μ λλ©μ΄μ μ κ°λ¨νκ² μΆκ°ν μ μλ κ²½λ λΌμ΄λΈλ¬λ¦¬μ λλ€.
GSAPμ ScrollTrigger μ¬μ© μμ
GSAP(GreenSock Animation Platform)κ³Ό ScrollTrigger νλ¬κ·ΈμΈμ κ°λ ₯ν μ νμ λλ€. λ€μμ κ°λ¨ν μμ μ λλ€:
HTML:
<div class="box">
<p>This box will move as you scroll!</p>
</div>
<div style="height: 200vh;></div>
CSS:
.box {
width: 100px;
height: 100px;
background-color: cornflowerblue;
color: white;
text-align: center;
line-height: 100px;
position: relative;
}
μλ°μ€ν¬λ¦½νΈ (GSAP λ° ScrollTrigger ν¬ν¨):
gsap.registerPlugin(ScrollTrigger);
gsap.to(".box", {
x: 500,
duration: 2,
scrollTrigger: {
trigger: ".box",
start: "top center",
end: "bottom center",
scrub: true, // Smoothly link animation to scroll position
markers: false, // Show start/end markers for debugging
}
});
μ€λͺ :
- ScrollTrigger νλ¬κ·ΈμΈμ λ±λ‘ν©λλ€.
gsap.to()λ "box" ν΄λμ€λ₯Ό κ°μ§ μμλ₯Ό μνμΌλ‘ 500ν½μ κΉμ§ μ λλ©μ΄μ νν©λλ€.scrollTriggerκ°μ²΄λ μ€ν¬λ‘€ κΈ°λ° νΈλ¦¬κ±°λ₯Ό ꡬμ±ν©λλ€:trigger: ".box"λ μ λλ©μ΄μ μ νΈλ¦¬κ±°νλ μμλ₯Ό μ§μ ν©λλ€.start: "top center"λ μ λλ©μ΄μ μ΄ μμλλ μμ (λ°μ€μ μλ¨μ΄ λ·°ν¬νΈ μ€μμ λΏμ λ)μ μ μν©λλ€.end: "bottom center"λ μ λλ©μ΄μ μ΄ λλλ μμ (λ°μ€μ νλ¨μ΄ λ·°ν¬νΈ μ€μμ λΏμ λ)μ μ μν©λλ€.scrub: trueλ μ λλ©μ΄μ μ§νλ₯ μ μ€ν¬λ‘€ μμΉμ λΆλλ½κ² μ°κ²°ν©λλ€.markers: true(λλ²κΉ μ©)λ νμ΄μ§μ μμ λ° μ’ λ£ λ§μ»€λ₯Ό νμν©λλ€.
μ€ν¬λ‘€ κΈ°λ° μ λλ©μ΄μ μ μν λͺ¨λ² μ¬λ‘
λΆλλ½κ³ μ±λ₯ μ’μ μ¬μ©μ κ²½νμ 보μ₯νλ €λ©΄ λ€μ λͺ¨λ² μ¬λ‘λ₯Ό λ°λ₯΄μΈμ:
- μ±λ₯ μ΅μ ν: νλμ¨μ΄ κ°μ(μ:
transform: translateZ(0);)μ μ¬μ©νμ¬ μ λλ©μ΄μ μ±λ₯μ ν₯μμν€μΈμ. μ€ν¬λ‘€ μ΄λ²€νΈ 리μ€λ λ΄μμ DOM μ‘°μμ μ΅μννμΈμ. - λλ°μ΄μ±/μ°λ‘νλ§ μ¬μ©: μ€ν¬λ‘€ μ΄λ²€νΈ 리μ€λ λ΄μμ ν¨μ νΈμΆ λΉλλ₯Ό μ ννμ¬ μ±λ₯ λ³λͺ© νμμ λ°©μ§νμΈμ. 볡μ‘ν κ³μ°μ μννλ κ²½μ° νΉν μ€μν©λλ€.
- μ κ·Όμ± κ³ λ €: μ λλ©μ΄μ μ λΉνμ±ννκ±°λ 보쑰 κΈ°μ μ μ¬μ©νλ μ¬μ©μλ₯Ό μν΄ μ½ν μΈ μ μ κ·Όν μ μλ λ체 λ°©λ²μ μ 곡νμΈμ. μ λλ©μ΄μ μ΄ λ°μμ΄λ κΈ°ν μ κ·Όμ± λ¬Έμ λ₯Ό μΌμΌν€μ§ μλλ‘ νμΈμ.
- λ€μν λΈλΌμ°μ λ° κΈ°κΈ°μμ ν μ€νΈ: λ€μν λΈλΌμ°μ (ν¬λ‘¬, νμ΄μ΄νμ€, μ¬ν리, μ£μ§)μ κΈ°κΈ°(λ°μ€ν¬ν±, νλΈλ¦Ώ, ν΄λν°)μμ μ λλ©μ΄μ μ μ² μ ν ν μ€νΈνμ¬ μΌκ΄λ λμμ 보μ₯νμΈμ.
- μλ―Έ μλ μ λλ©μ΄μ μ¬μ©: μ λλ©μ΄μ μ μ¬μ©μ κ²½νμ ν₯μμμΌμΌ νλ©° μ½ν μΈ μμ μ£Όμλ₯Ό λΆμ°μμΌμλ μ λ©λλ€. λ¨μν μ λλ©μ΄μ μ μν μ λλ©μ΄μ μ¬μ©μ νΌνμΈμ.
- μ±λ₯ λͺ¨λν°λ§: λΈλΌμ°μ κ°λ°μ λꡬλ₯Ό μ¬μ©νμ¬ μ λλ©μ΄μ μ±λ₯μ λͺ¨λν°λ§νκ³ μ μ¬μ μΈ λ³λͺ© νμμ μλ³νμΈμ.
κΈλ‘λ² μμ λ° κ³ λ €μ¬ν
κΈλ‘λ² μ¬μ©μλ₯Ό λμμΌλ‘ μ€ν¬λ‘€ κΈ°λ° μ λλ©μ΄μ μ λμμΈν λλ κΈμ μ μ΄κ³ ν¬μ©μ μΈ κ²½νμ 보μ₯νκΈ° μν΄ λ€μν μμλ₯Ό κ³ λ €νλ κ²μ΄ μ€μν©λλ€:
- μΈμ΄ λ° ν μ€νΈ λ°©ν₯: μΉμ¬μ΄νΈκ° μ¬λ¬ μΈμ΄λ₯Ό μ§μνλ κ²½μ°, μ λλ©μ΄μ μ΄ λ€λ₯Έ ν μ€νΈ λ°©ν₯(μ: μλμ΄ λλ νλΈλ¦¬μ΄μ κ°μ μ€λ₯Έμͺ½μμ μΌμͺ½μΌλ‘ μ°λ μΈμ΄)μ μ¬λ°λ₯΄κ² μ μνλμ§ νμΈνμΈμ. μ΄λ μ λλ©μ΄μ μ λ€μ§κ±°λ νμ΄λ°μ μ‘°μ νλ κ²μ ν¬ν¨ν μ μμ΅λλ€.
- λ¬Ένμ λ―Όκ°μ±: μκ°μ μ νΈλμ μμ§μ£Όμμ λ¬Ένμ μ°¨μ΄λ₯Ό μΌλμ λμΈμ. νΉμ λ¬Ένμμ λΆμΎνκ±°λ λΆμ μ ν μ μλ μ λλ©μ΄μ μ¬μ©μ νΌνμΈμ. μλ₯Ό λ€μ΄, νΉμ μμμ λ€λ₯Έ λ¬Ένμμ νΉλ³ν μλ―Έλ₯Ό κ°μ§λλ€.
- λ€νΈμν¬ μ°κ²°μ±: μΈκ³ κ°μ§μ μ¬μ©μλ€μ΄ λ€μν λ€νΈμν¬ μλλ₯Ό κ°μ§ μ μλ€λ μ μ κ³ λ €νμΈμ. λλ¦° μ°κ²°μμλ μ λλ©μ΄μ μ΄ λΉ λ₯΄κ² λ‘λλκ³ λΆλλ½κ² μλνλλ‘ μ΅μ ννμΈμ. μ μ§μ λ‘λ© κΈ°μ μ μ¬μ©νκ±°λ λμνμ΄ μ νλ μ¬μ©μλ₯Ό μν΄ μΉμ¬μ΄νΈμ λ¨μνλ λ²μ μ μ 곡νλ κ²μ κ³ λ €νμΈμ.
- μ κ·Όμ± νμ€: κ΅μ μ κ·Όμ± νμ€(μ: WCAG)μ μ€μνμ¬ μ¬μ©μμ μμΉμ κ΄κ³μμ΄ μ₯μ κ° μλ μ¬μ©μλ μ λλ©μ΄μ μ μ κ·Όν μ μλλ‘ λ³΄μ₯νμΈμ. μ΄λ μ λλ©μ΄μ μ΄λ―Έμ§μ λν λ체 ν μ€νΈλ₯Ό μ 곡νκ³ , λ°μμ μ λ°ν μ μλ κΉλ°μμ΄λ λ²μ©μμ΄ μλλ‘ νλ κ²μ ν¬ν¨ν©λλ€.
- κΈ°κΈ° λ€μμ±: μ μΈκ³ μ¬μ©μλ€μ΄ μΉμ¬μ΄νΈμ μ μνλ λ° μ¬μ©ν μ μλ λ€μν κΈ°κΈ°λ₯Ό κ³ λ €νμΈμ. λͺ¨λ κΈ°κΈ°μμ 보기 μ’κ³ μ μλνλλ‘ λ€μν νλ©΄ ν¬κΈ°μ ν΄μλμμ μ λλ©μ΄μ μ ν μ€νΈνμΈμ.
μμ : μ§μ λ°μ΄ν°κ° ν¬ν¨λ μΈν°λν°λΈ μ§λ
κΈ°ν λ³νμ λν κΈλ‘λ² λ°μ΄ν°λ₯Ό μ 곡νλ μΉμ¬μ΄νΈλ₯Ό μμν΄ λ³΄μΈμ. μ¬μ©μκ° μ€ν¬λ‘€νλ©΄ μ§λκ° λ€λ₯Έ μ§μμΌλ‘ νλλλ©΄μ ν΄λΉ μ§μκ³Ό κ΄λ ¨λ νΉμ λ°μ΄ν° ν¬μΈνΈλ₯Ό κ°μ‘° νμν©λλ€. μλ₯Ό λ€μ΄:
- μ λ½μΌλ‘ μ€ν¬λ‘€νλ©΄ μ λ½ μ°ν©μ νμ λ°°μΆλμ λν λ°μ΄ν°κ° λνλ©λλ€.
- λλ¨μμμλ‘ μ€ν¬λ‘€νλ©΄ ν΄μλ©΄ μμΉμ΄ ν΄μ μ§μ μ¬νμ λ―ΈμΉλ μν₯μ΄ κ°μ‘°λ©λλ€.
- μνλ¦¬μΉ΄λ‘ μ€ν¬λ‘€νλ©΄ λ¬Ό λΆμ‘±κ³Ό μ¬λ§νμ κ³Όμ λ₯Ό 보μ¬μ€λλ€.
μ΄ μ κ·Ό λ°©μμ μ¬μ©μκ° μ§μνλ λ μ¦λ₯Ό ν΅ν΄ κΈλ‘λ² λ¬Έμ λ₯Ό νμν μ μκ² νμ¬ μ 보λ₯Ό λ κ΄λ ¨μ± μκ³ ν₯λ―Έλ‘κ² λ§λλλ€.
κ²°λ‘
CSS μ λλ©μ΄μ λ²μ, νΉν μ€ν¬λ‘€ κΈ°λ° μ λλ©μ΄μ μ μ΄λ λ§€λ ₯μ μ΄κ³ μΈν°λν°λΈν μΉ κ²½νμ λ§λ€κΈ° μν κ°λ₯μ±μ μΈκ³λ₯Ό μ΄μ΄μ€λλ€. κΈ°λ³Έ κ°λ μ μ΄ν΄νκ³ , κ³ κΈ κΈ°μ μ λ§μ€ν°νλ©°, λͺ¨λ² μ¬λ‘λ₯Ό λ°λ₯΄λ©΄ μ€ν¬λ‘€ μμΉλ₯Ό νμ©νμ¬ μ¬μ©μμ μνΈμμ©μ μ§μ λ°μνλ λ§€νΉμ μΈ ν¨κ³Όλ₯Ό λ§λ€ μ μμ΅λλ€.
λ€μν μ λλ©μ΄μ κΈ°μ μ μ€ννκ³ , μΈκΈ° μλ λΌμ΄λΈλ¬λ¦¬λ₯Ό νμνλ©°, νμ μ±λ₯κ³Ό μ κ·Όμ±μ μ°μ μνμ¬ μ μΈκ³ μ¬μ©μμκ² λΆλλ½κ³ ν¬μ©μ μΈ μ¬μ©μ κ²½νμ μ 곡νμΈμ. μ€ν¬λ‘€ κΈ°λ° μ λλ©μ΄μ μ νμ λ°μλ€μ¬ μΉμ¬μ΄νΈλ₯Ό μ μ μΈ νμ΄μ§μμ μλμ μ΄κ³ μΈν°λν°λΈν μ€ν 리ν λ§ νλ«νΌμΌλ‘ λ³νμν€μΈμ.